<template>
  <div class="box">
    <button @click="addData">add data</button>
    <sa-calendar-toggle v-model:visible="visible" :latticeHeight="40" :isSixRow="false" :startWeek="1"
      v-model:date="date" :data="data" :detailkey="'date'" @onDblClick="handleDay">
      <template #header="{ data }">
        <div class="custom">
          {{ data }}
        </div>
      </template>
      <template #day="{ data, index ,row}">
        <div class="mydate">
          <template v-if="index == 0">
            <div class="mydate-week">{{ moment(new Date(data.year, data.month, data.day)).format("W") }}</div>
          </template>
          <div class="custom" :class="{ 'active': data.active, 'opacity': data.status != 1 }">{{ data.day }}{{
            data?.detail?.text
          }}</div>
        </div>
      </template>
      <template #toggle>
        <div class="custom" @click="toggleFn">toggle</div>
      </template>
    </sa-calendar-toggle>
    
    <br>

    <button @click="handleClickSwitch">switch</button>
    <sa-calendar :weekType="'en'" :data="data" @handleClickDate="handleClickDate" :startWeek="startWeek" :date="date">
      <template #header="{ date }">
        {{ date }}
      </template>
      <template #dayItem="{ item }">{{ item.day }} {{ item.detail && item.detail.text }}</template>
    </sa-calendar>
    <br>
    <saWeekCalendar :date="date"></saWeekCalendar>
    <br><br>

    <button @click="handleClickStartWeek">startWeek</button>

    <sa-week-calendar @handleClickWeek="handleClickWeek" :detailkey="detailkey" :startWeek="startWeek" :data="data"
      :date="date">
      <template #weekItem="{ item }">
        <div>
          <div>{{ item.day }}日</div>
          <div>星期{{ item.week }}</div>
          <p>{{ item.detail && item.detail.text }}</p>
        </div>
      </template>
    </sa-week-calendar>

    
  </div>
</template>

<script setup>
import moment from 'moment';
import { ref } from 'vue';
// import {saCalendar} from './package/index.js';
// import saCalendar from './package/sa-calendar/saCalendar.vue';
// import saWeekCalendar from './package/sa-week-calendar/saWeekCalendar.vue';
let date = ref(new Date('2023/2/16'));

let handleClickSwitch = () => {
  date.value = new Date()
  console.log(date.value);
}
const handleClickDate = (i) => {
  console.log(i);
}

let detailkey = ref('date');
let startWeek = ref(7);
let data = ref([
  {
    date: '2023-02-01',
    text: '1232'
  }
])
const addData = () =>{
  data.value.push({
    date:'2023-02-16',
    text:'疯狂星期四'
  })
}
const handleClickWeek = (item) => {

}

const handleClickStartWeek = () => {
  if (startWeek.value == 1) {
    startWeek.value = 7;
  } else {
    startWeek.value = 1;
  }
}



const handleDay = (item) => {
  console.log(item);
}
const setDate = () => {
  date.value = new Date(2022, 10, 10);
}
let visible = ref(true);
const toggleFn = () => {
  visible.value = !visible.value
}
</script>

<style scoped>
.box{
  width: 1000px;
}
.mydate {
  width: 100%;
  height: 100%;
  position: relative;
}

.mydate-week {
  position: absolute;
  font-size: 14px;
  color: pink;
  text-align: center;
  border-right: 1px solid pink;
  cursor: pointer;
  width: 40px;
  left: -40px;
}

:deep .calendarToggle-day-row {
  padding-left: 40px;
}

:deep .calendarToggle-week {
  padding-left: 40px;
}

:deep .calendarToggle-day-row_active {
  background: #eee;
}

.custom {
  width: 100%;
  text-align: center;
  user-select: none;
}

.active {
  font-size: 20px;
  color: #58241d;
  font-weight: 600;
}

.opacity {
  opacity: .5;
}
</style>